<template>
    <div>
        <div class="top-bar">
            <div class="top-bar-box banner-box">
                <a href="#jieshao">公司介绍</a>
                <span></span>
                <div class="a" @click="gotoTelme()">联系我们</div>
            </div>
        </div>


        <!-- about -->
        <div class="about-box banner-box" id="jieshao">
            <div class="left-box">
                <div class="title">
                    ABOUT US
                </div>
                <div class="title2">
                    潍坊华亿康医疗设备有限公司
                </div>
                <div class="message">
                    潍坊华亿康医疗设备有限公司坐落于潍坊高新技术产业开发区，成立
                    于2018年，公司从事输血方面医疗设备代理商转到研发、生产、销售
                    和代理为一体的医疗设备供应商，积累了丰富的行业经验和网络了一
                    大批技术人才，目前主要致力于中心血站、血液中心、医院输血科用产
                    品，各种型号的血浆解冻箱、血小板保存箱、血液低温操作台、血液滤
                    白柜、配血台、热合机、新式水浴箱、离心机等。以及相关科研单位用
                    的净化操作台，低温操作台、层析柜、培养箱等产品。欢迎各地代理商
                    和用户来洽谈合作。
                </div>
            </div>
        </div>

    </div>
</template>
<script setup>
import router from '@/router/index.js'

const gotoTelme = () => {
    router.push('/telme')
}

</script>

<style lang="scss" scoped>
/* pc */
@media (min-width: 800px) {
    .top-bar {
        background-color: rgb(244, 245, 249);

        .top-bar-box {
            padding: 20px 0;
            display: flex;

            span {
                display: block;
                height: 60px;
                background-color: gainsboro;
                width: 1px;
                margin-left: 40px;
                margin-right: 40px;
            }

            a {
                line-height: 60px;
                cursor: pointer;
                transition: transform 0.3s ease;
                color: black;

            }

            a:hover {
                color: red;
            }

            .a {
                line-height: 60px;
                cursor: pointer;
                color: black;
                transition: transform 0.3s ease;
            }

            .a:hover {
                color: red;
            }
        }
    }


    .about-box {
        padding: 40px 0;
        display: flex;

        .left-box {
            .title {
                color: rgb(189, 152, 108);
                font-size: 18px;
            }

            .title2 {
                line-height: 48px;
                font-weight: 400;
                font-size: 35px;
            }

            .message {
                color: rgb(170, 170, 170);
                line-height: 32px;
            }
        }

        .img-box {
            margin-left: 40px;
        }
    }

    .kehu-box {
        background-color: rgb(235, 243, 247);

        .box {
            padding: 40px 0;

            .title {
                text-align: center;
                font-size: 42px;
            }


            .item-box {
                display: flex;
                justify-content: space-between;
                padding-top: 40px;

                .item {
                    width: 270px;

                    img {
                        width: 270px;
                    }

                    p {
                        text-align: center;
                    }
                }
            }
        }
    }

    .changrong-box {
        background-color: rgb(255, 255, 255);

        .box {
            padding: 40px 0;

            .title {
                text-align: center;
                font-size: 42px;
            }


            .item-box {
                display: flex;
                justify-content: space-between;
                padding-top: 40px;

                .item {
                    width: 270px;

                    img {
                        width: 270px;
                    }

                    p {
                        text-align: center;
                    }
                }
            }
        }
    }
}

/* phone */
@media screen and (max-width: 799px) {
    img {
        width: 100%;
    }

    .top-bar {
        display: none;
    }

    .about-box {
        .left-box {
            .title {
                display: none;
            }

            .title2 {
                display: none;
            }

            .message {
                line-height: 40px;
                font-size: 18px;
                padding: 10px;
            }
        }
    }

    .kehu-box {
        .box {
            .title {
                text-align: center;
                font-size: 20px;
                line-height: 40px;
            }

            .item-box {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 4px;
                text-align: center;
            }
        }

    }
    .changrong-box {
        margin: 10px 0;
        .box {
            .title {
                text-align: center;
                font-size: 20px;
                line-height: 40px;
            }
            .item-box {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 4px;
                .item {
                    p {
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>
